<template>
  <div class="polymerized-basan-buy-wrapper">
    <van-action-sheet v-model="isPolymerizedBasanBuyShow" @close="onPolymerizedBasanBuyClose"> 
      <div class="container">
        <span class="tip">是否购买第{{ id }}号钓场</span>
        <van-button class="submit-btn" type="default" block @click="onSubmitBtnClick">确认</van-button>
        <div class="split"></div>
        <van-button class="cancel-btn" type="default" block @click="onCancelBtnClick">取消</van-button>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import * as CONSTANTS from "@/config/constants.js";

export default {
  name: "PolymerizedBasanBuy",
  data() {
    return {
      id: null,
      isPolymerizedBasanBuyShow: false,
    };
  },
  methods: {
    show(id) {
      this.id = id;
      this.isPolymerizedBasanBuyShow = true;
    },
    close() {
      this.isPolymerizedBasanBuyShow = false;
      
    },
    onPolymerizedBasanBuyClose() {
      this.$bus.$emit(CONSTANTS.EventEnum.RESETCLICKEDBASAN);
    },
    onSubmitBtnClick() {
      this.close();
    },
    onCancelBtnClick() {
      this.close();
    }
  },
};
</script>
<style lang="less" scoped>
.polymerized-basan-buy-wrapper {
  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .tip {
      font-size: 16px;
      margin: 13px;
      color: rgb(140,140,140);
    }

    .submit-btn {
      border: none;
      color: rgb(0,120,255);
      height: 48px;
    }

    .split {
      width: 100%;
      height: 8px;
      background-color: rgb(245,245,245);

    }
    .cancel-btn {
      border: none;
      color: rgb(140,140,140);
      height: 82px;

      .van-button__text {
        margin-bottom: 17px;
      }
    }
  }
}
</style>